<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>别让这些闹心的套路，毁了你的网页设计</title>
<meta name="keywords" content="网页,设计">
<meta name="description" content="别让这些闹心的套路，毁了你的网页设计">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/base.css" rel="stylesheet">
<link href="static/css/m.css" rel="stylesheet">
<script src="static/js/jquery-1.8.3.min.js"></script>
<script src="static/js/comm.js"></script>
<!--[if lt IE 9]>
<script src="static/js/modernizr.js"></script>
<![endif]-->
<script type="text/javascript" src="static/js/ajax.js"></script>
</head>
<body>
<!--top begin-->
<header id="header">
  <div class="navbox">
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <div class="logo"><a href="index.html">杨青青个人博客</a></div>
 <nav>
<ul id="starlist">
     <li><a href="index.html" title="首页">网站首页</a></li> 
  <li><a href="index1.html">个人博客日记</a></li>    <li class="menu"><a href="index2.html">网站制作</a>
  <ul class="sub">
   
      <li><a href="index3.html">CSS3|Html5</a></li><li><a href="index4.html">网站建设</a></li><li><a href="index5.html">推荐工具</a></li>    </ul><span></span></li>
    <li><a href="index6.html">设计心得</a></li>  <li><a href="index7.html">关于我</a></li>  <li><a href="index8.html">时间轴</a></li>  <li><a href="index9.html">博客导航</a></li>  <li><a href="11.html">留言</a></li>    </ul>
</nav>
    <div class="searchico"></div>
  </div>
</header>
<div class="searchbox">
  <div class="search">
    <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
      <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
      <input name="show" value="title" type="hidden">
      <input name="tempid" value="1" type="hidden">
      <input name="tbname" value="news" type="hidden">
      <input name="Submit" class="input_submit" value="搜索" type="submit">
    </form>
  </div>
  <div class="searchclose"></div>
</div>
<!--top end-->
<article> 
  <!--lbox begin-->
  <div class="lbox">
    <div class="content_box whitebg">
      <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href="index.html">首页</a>&nbsp;>&nbsp;<a href="index2.html">网站制作</a>&nbsp;>&nbsp;<a href="index3.html">CSS3|Html5</a></span>CSS3|Html5</h2>
      <h1 class="con_tilte">别让这些闹心的套路，毁了你的网页设计</h1>
      <p class="bloginfo"><i class="avatar"><img src="static/picture/avatar.jpg"></i><span></span><span>2018-11-08</span><span>【CSS3|Html5】</span><span><script src="static/js/4_13_1.js"></script>人已围观</span></p>
      <p class="con_info"><b>简介</b>网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题</p>
      <div class="con_text">
网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题。<br><br><strong>1、色彩种类运用过多</strong><br>很多站长为了让自己的网站更有吸引力，往往会给网站增添一些绚丽的颜色，加入大量色彩鲜艳的文字与边框，而这些颜色的运用与图片内容并不协调。降低了网站内容的可读性。所以如何更好的把握网站&lt;访问者的喜好,为用户提供一个可读性更强的网站?这其中颜色就起到了相当大的作用。<br><br><strong>解决办法</strong>：最好的办法是使用最多三种主色调与素雅的背景。<br>1、推荐给大家两篇关于颜色搭配的文章《<u><a href="javascript:;" target="_blank">6条网页设计配色原则,让你秒变配色高手</a></u>》以及《<u><a href="javascript:;" target="_blank">Web Color Design&mdash;&mdash;设计师谈网页配色艺术</a></u>》<br>2、如果你还在为获取web颜色而烦恼的话，建议你使用<u><a href="javascript:;">Color Scheme Designer</a></u>取色工具，以不同的模式，可以让你一下获取相近的四个颜色。<br><br><img alt="" src="static/picture/7a4943e6097a240f138f077a6a3ed3e9.jpg"><br><br><strong>2、字体大小存在问题</strong><br>这类问题往往存在多种表现形式，包括字体不足12号使得用户无法看清甚至点不到后退按钮。很多网页的上的字体都是正常大小,对我们来说刚好,但是父母来说网页上的字就会偏小了。<br><br><strong>解决办法：</strong>一般中文的字体大小是12px或者14px。随着显示器分辨率不断提高，12px的文字在大于1440*900的显示器里看起来会显得比较小，阅读起来不是很容易，所以现在网页设计里面用12px的已经比较少了，特别是文章正文部分，普遍都会用14px。<br><br>对于font-family，一般来说14px及以下大小的文字，应当设置为宋体，当然也可以设置为微软雅黑。不过在XP下默认是没有雅黑字体的，所以在css里面可以这样设置字体： font-family:&quot;Microsoft Yahei&quot;,simSun,Arial; 把几个字体用逗号隔开，如果系统没有第一种字体，就用第二种，如果没有第二种就用第三种，以此类推。 对于大于14px的文字，特别是大于16px的文字，宋体看起来就比较丑陋了，所以建议是用黑体或者微软雅黑，看起来回舒服一些。<br><br>3、<strong>过度使用GIF、动画与音效</strong><br><br>在某些情况下，GIF动画非常有趣；动画能够让访问者获得更好的使用体验；音效可能也有助于提升感受。但这些都只是点缀，切记不可画蛇添足。GIF动画过多会造成一种庸俗而幼稚的氛围，而大家对于音效以及音乐的取向也有所不同。有时，我们精心设计，却难以实现效果。<br><br><strong>解决办法：</strong>千万别让费尽心力添加的动画与音效成了刺眼又刺耳的垃圾元素。使用GIF动画最好能免则免<br><br>4、<strong>超大的导航菜单<br><br><img alt="" src="static/picture/38b6a61afae81367a8979cb9a20871c5.jpg"></strong><br><br>大型的导航菜单，对于包含大量不同子页面的网站而言，似乎是一个很好的解决方案，然而实际情况并非如此。我们常见的网站设计错误就是在边栏及子菜单中塞进长长的清单，超大的导航菜单对于绝大多数的普通用户而言，看起来更像是迷宫。这看似满足了全部用户的需求，实则会分散用户注意力，并让用户觉得不那么爽。如果导航、侧栏与底栏无法协同工作，那么网站内容再好也将没有意义。<br><br><strong>解决办法：</strong>信息分类整合其实是就是为了应对这种情况而存在的，将网站的导航内容规划为不同的大分类，有了层级，用户更容易筛选；又或者你可以将导航设计成为更为有趣的图文式链接，让它看起来不那么枯燥，也不失为一个可取的方案。永远不要低估在屏幕上留白的重要性，因为其是创造平衡美感的重要基础。<br><br>5、<strong>乏味无趣的加载页面<br><br><img alt="" src="static/picture/f9e0c0b48031d0e0017fc9bad904bde3.gif"></strong><br>随着技术的进步，时间对于人们来说越来越宝贵，为了一个20M的网页在浏览器前静静坐上1分钟等待加载，那大多数用户都会有关掉它的冲动，因为我们会在这个过程中无数次怀疑这个页面是不是卡住了。如今的网站加载需要的是速度和效率，这符合当前的真实用户需求。给用户提供即时的位置、时间和响应对一个优秀的产品来说很重要。<br><br><strong>解决办法：</strong>
<p>如果你的网站在加载速度上有问题，首先应该加载页面中较轻的元素，以及整个框架，然后使用加载器将较大和较重的元素逐步填充进去。这样一来，用户就不会觉得页面卡在那儿，而是在逐步加载了。</p>
<p>缓冲应该尽量避免，如果它必须存在，那就应该有趣一点。加载页面可以是一个加载进度条，一个为浪费用户等待时间的道歉或者是配有文案的简单动画。<br><br>6、<strong>设计臃肿，内容杂乱</strong><br><br>不断增加的功能会导致需求和交付之间的延迟，这会让设计逐渐变得臃肿。将各类新闻、链接以及图片塞进同一页面只会使其显得杂乱不堪，导致用户难以阅读及导航。<br><br><strong>解决办法：坚持增加必要且有价值的功能，尽量避免内容混乱多余。</strong><br><br>7、<strong>对移动设备不够友好</strong><br><br>智能手机已经成为人们在互联网上获取内容的最佳途径。大家的多数出站流量很可能都指向智能手机或者平板电脑。如果各网页没有针对移动设备进行优化，那么可能会面对难以进行正常访问等问题。<br><br><strong>解决办法：让你的网页代码适应各种手机、平板等不同分辨率大小<br><br>8、无限滚动</strong><br><br>无限滚动的出现，终于解决了移动端上查看繁复的分类页的问题。不过与此同时，无限滚动的设计，还为我们创造了不少从未遇到的新问题。举个例子，当你要访问一个重要的页面，而它正好在长滚动页面的底部，撇开加载页面的时间和流量不谈，滚到底部去找就已经是一个很头疼的事情了。<br><br><strong>解决办法：</strong>就像超大的导航菜单一样，想要让它发挥作用一样有合理的解决方案。将传统的移动端页面和无限滚动两种模式结合起来使用，让用户自己来选择更适合自己的模式，这有助于提升页面的可访问性。</p><p></p>
<p>Tags：</p>
        <p class="share"><b>转载：</b>感谢您对杨青青个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源杨青个人博客”。<a href="" target="_blank">/web/html/13.html</a></p>
        <p><span class="diggit"><a href="JavaScript:makeRequest('/e/public/digg/?classid=4&id=13&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"> 很赞哦！ </a>(<b id="diggnum"><script type="text/javascript" src="static/js/4_13_5.js"></script></b>)</span></p>
        <div class="nextinfo">
      <p>上一篇：<a href='index3.html'>返回列表</a></p>
      <p>下一篇：<a href='14.html'>十条设计原则教你学会如何设计网页布局!</a></p>
        </div>
      </div>
    </div>
    <div class="whitebg">
      <h2 class="htitle">相关文章</h2>
      <ul class="otherlink">

<li><a href="9.html" title="Ui Parade免费的UI在线设计工具">Ui Parade免费的UI在线设计工具</a></li><li><a href="7.html" title="安静地做一个爱设计的女子">安静地做一个爱设计的女子</a></li>

      </ul>
    </div>
    <div class="whitebg">
      <h2 class="htitle">随机图文</h2>
      <ul class="xiangsi">
        <li><a href="14.html" target="_blank"><i><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg"></i>
          <p>十条设计原则教你学会如何设计网页布局!</p>
          <span>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局,很少用三列布局的.下面我来分享下我们常用的网页布局格式以及设计技巧</span></a></li>
        <li><a href="17.html" target="_blank"><i><img src="static/picture/0ce295f3c5f3c2d60e45e5715580aefa.jpg"></i>
          <p>【分享】css3侧边栏导航不同方向划出效果</p>
          <span>设定一组侧边栏导航菜单，然后可以从任何一边滑出。有两种实现方式，一种固定菜单，一种从左右两侧推出</span></a></li>
        <li><a href="15.html" target="_blank"><i><img src="static/picture/a1fbdb8105f82ea04993f2dbbeacf29a.jpg"></i>
          <p>三步实现滚动条触动css动画效果</p>
          <span>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力</span></a></li>
        <li><a href="" target="_blank"><i><img src="static/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg"></i>
          <p>别让这些闹心的套路，毁了你的网页设计</p>
          <span>网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题</span></a></li>
 
     </ul>
    </div>

<div class="whitebg gbook">
      <h2 class="htitle">文章评论</h2>
      <ul>
<script src="static/js/4_13_20.js"></script>
<script>
          function CheckPl(obj)
          {
          if(obj.saytext.value=="")
          {
          alert("您没什么话要说吗？");
          obj.saytext.focus();
          return false;
          }
          return true;
          }
          </script>
<form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
  <div id="plpost">
    <p class="saying"><span><a href="4_13.html">共有<script type="text/javascript" src="static/js/4_13_2.js"></script>条评论</a></span>来说两句吧...</p>
    <p class="yname"><span>用户名:</span>
      <input name="username" type="text" class="inputText" id="username" value="" size="16">
    </p>
    <p class="yzm"><span>验证码:</span>
      <input name="key" type="text" class="inputText" size="16">
      <img src="static/picture/pl.jpg" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新"> </p>
    <input name="nomember" type="hidden" id="nomember" value="1" checked="checked">
    <textarea name="saytext" rows="6" id="saytext"></textarea>
    <input name="imageField" type="submit" value="提交">
    <input name="id" type="hidden" id="id" value="13">
    <input name="classid" type="hidden" id="classid" value="4">
    <input name="enews" type="hidden" id="enews" value="AddPl">
    <input name="repid" type="hidden" id="repid" value="0">
    <input type="hidden" name="ecmsfrom" value="/web/html/13.html">
    
  </div>
</form>
      </ul>
    </div>
  </div>
  <!--lbox end-->
  <div class="rbox">
    <div class="whitebg paihang">
      <h2 class="htitle">点击排行</h2>
      <section class="topnews imgscale"><a href="14.html"><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
      <ul>
        <li><i></i><a href="16.html" title="使用CSS3制作文字、图片倒影" target="_blank">使用CSS3制作文字、图片倒影</a></li>
        <li><i></i><a href="17.html" title="【分享】css3侧边栏导航不同方向划出效果" target="_blank">【分享】css3侧边栏导航不同方向划出效果</a></li>
        <li><i></i><a href="" title="别让这些闹心的套路，毁了你的网页设计" target="_blank">别让这些闹心的套路，毁了你的网页设计</a></li>
        <li><i></i><a href="15.html" title="三步实现滚动条触动css动画效果" target="_blank">三步实现滚动条触动css动画效果</a></li>
      </ul>
    </div>
    <div class="whitebg tuijian">
      <h2 class="htitle">本站推荐</h2>
      <section class="topnews imgscale"><a href="14.html"><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
      <ul>

        <li><a href="" title="别让这些闹心的套路，毁了你的网页设计" target="_blank"><i><img src="static/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg"></i>
          <p>别让这些闹心的套路，毁了你的网页设计</p>
          </a></li>


      </ul>
    </div>
    <div class="ad whitebg imgscale">
      <ul>
        <a href='javascript:;' target="_blank"><img src='static/picture/ad.jpg'></a>      </ul>
    </div>
    <div class="whitebg cloud">
      <h2 class="htitle">标签云</h2>
      <ul>
       <a href="E8AEBEE8AEA1_8.html" target="_blank">设计</a> <a href="E88A82E697A5_8.html" target="_blank">节日</a> <a href="E7A88BE5BA8FE59198_8.html" target="_blank">程序员</a> <a href="E799BEE5BAA6_8.html" target="_blank">百度</a> <a href="E4B8AAE4BABAE58D9AE5AEA2_8.html" target="_blank">个人博客</a> <a href="E8A786E9A291E69599E7A88B_8.html" target="_blank">视频教程</a> <a href="E58D9AE5AEA2_8.html" target="_blank">博客</a> <a href="E7BD91E7AB99E588B6E4BD9C_8.html" target="_blank">网站制作</a> <a href="E7BD91E7AB99_8.html" target="_blank">网站</a> <a href="E4BB8AE5A495E4BD95E5A495_8.html" target="_blank">今夕何夕</a> <a href="E4B8AAE4BABA_8.html" target="_blank">个人</a> <a href="E98791E7899BE4BA91E69C8D_8.html" target="_blank">金牛云服</a> <a href="E5B89DE59BBDcms_8.html" target="_blank">帝国cms</a> <a href="E7A9BAE997B4_8.html" target="_blank">空间</a> <a href="E998BFE9878CE4BA91_8.html" target="_blank">阿里云</a>      </ul>
    </div>
 
   <div class="whitebg wenzi">
      <h2 class="htitle">猜你喜欢</h2>
      <ul>
                        <li><a target="_blank" href="14.html">十条设计原则教你学会如何设计网页布局!</a></li>
                        <li><a target="_blank" href="15.html">三步实现滚动条触动css动画效果</a></li>
                        <li><a target="_blank" href="">别让这些闹心的套路，毁了你的网页设计</a></li>
                        <li><a target="_blank" href="17.html">【分享】css3侧边栏导航不同方向划出效果</a></li>
                        <li><a target="_blank" href="16.html">使用CSS3制作文字、图片倒影</a></li>
                   </ul>
    </div>
    <div class="ad whitebg imgscale">
      <ul>
        <a href='javascript:;' target="_blank"><img src='static/picture/ad02.jpg'></a>      </ul>
    </div>
    <div class="whitebg tongji">
      <h2 class="htitle">站点信息</h2>
      <ul>
        <li><b>建站时间</b>：2018-10-24</li>
        <li><b>网站程序</b>：帝国CMS7.5</li>
        <li><b>主题模板</b>：<a href="javascript:;" target="_blank">《今夕何夕》</a></li>
        <li><b>文章统计</b>：<a href="index8.html" target="_blank">31</a>篇文章</li>
        <li><b>标签管理</b>：<a href="tags.html" target="_blank">标签云</a></li>
        <li><b>统计数据</b>：<a href="index.html" target="_blank">百度统计</a></li>
        <li><b>微信公众号</b>：扫描二维码，关注我们</li>
        <li class="tongji_gzh"><a href='index.html' target="_blank"><img src='static/picture/wxgzh.jpg'></a></li>
      </ul>
    </div>
  </div>
</article>
<footer>
  <div class="box">
    <div class="wxbox">
      <ul>
        <li><img src="static/picture/wxgzh.jpg"><span>微信公众号</span></li>
        <li><img src="static/picture/wx.png"><span>我的微信</span></li>
      </ul>
    </div>
    <div class="endnav">
      <p><b>站点声明：</b></p>
      <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
      <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="javascript:;" target="_blank">dacesmiling@qq.com</a></p>
      <p>Copyright © <a href="javascript:;" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a href="javascript:;" target="_blank">蜀ICP备11002373号-1</a></p>
    </div>
  </div>
  <a href="#">
  <div class="top"></div>
  </a> </footer><script src="static/js/donews_4_13.js"></script></body>
</html>
